<template>
  <div class="container inviteFriends">
    <img mode="widthFix" class="ant-grid-icon" src="../../../static/images/inviteFriends-banner.png" />
    <button type="button" class="inviteFriends-btn" open-type="share">邀请好友赚赏金</button>
    <div class="inviteFriends-bounty">
      <p>已获得奖金 <span v-if="data">{{data.info.income.total_price}}</span>元</p>
      <i-button size="small" i-class="inviteFriends-view" shape="circle" @click="$router.push({ path: '/pages/distribution/distribution'})">查看详情</i-button>
    </div>
    <div class="inviteFriends-info">
      <div class="title">如何躺着赚钱？</div>
      <div class="content">
        <div class="cell">
          <span>1、</span>
          <p>A邀请好友B填写邀请码注册，A、B双方均能获得2元奖励金；B邀请C，则B、C双方均能获得2元奖励金;</p>
        </div>
        <div class="cell">
          <span>2、</span>
          <p>邀请的好友B在平台消费，A能获取消费金额0.5%的抽成；好友C在平台消费，A和B分别能获取消费金额0.5%抽成仅能获取邀请好友2级阶梯。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from "Vuex";
  // 依赖
  import AntCoupons from '@/components/coupons'
  import request from "@/api/request";
  export default {
    components: {
      AntCoupons
    },
    data() {
      return {
        data: null,
        order: 0, // 0-默认综合 1-佣金排行 2-新品 3-销量
        page: 1,
        isLoadEnd: false
      };
    },
    computed: {
      ...mapState(['userInfo'])
    },
    methods: {
      getDistributGoods() {
        const {
          order,
          page,
        } = this
        request.getDistributGoods({
          order,
          page,
        }).then(res => {
          if (res.data.length < 20) {
            this.isLoadEnd = true
          }
          if (this.data) {
            this.data = this.data.concat(res.data)
          } else {
            this.data = res.data
          }
        })
      }
    },
    onShareAppMessage() {
      return {
        path: `/pages/authorization/authorization?is_share=1&share_user_id=${this.userInfo.id}`,
      }
    },
    onReachBottom() {
      this.page++;
      this.getDistributGoods();
    },
    mounted() {
      this.data = null
      this.getDistributGoods()
    }
  };

</script>

<style lang="less">
  .inviteFriends {
    img {
      width: 100%;
      display: block;
    }

    .inviteFriends-btn {
      background-image: linear-gradient(0deg, rgb(239, 197, 53) 0%, rgb(251, 228, 76) 100%);
      width: 295px;
      height: 44px;
      border-radius: 22px;
      font-size: 18px;
      color: rgb(226, 84, 41);
      text-align: center;
      text-shadow: 0px 5px 10px rgba(174, 51, 14, 0.17);
      line-height: 44px;
      margin: 0 auto;
      margin-top: -62px;
    }

    .inviteFriends-bounty {
      margin-top: 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px;
      background: #fff;

      p {
        color: #E25429;
        font-size: 14px;

        span {
          font-size: 18px;

        }
      }

      .inviteFriends-view {
        height: 30px;
        line-height: 30px;
        background: none;
        background: #fff !important;
        box-shadow: #EE7559 !important;
        border: 1px solid #EE7559 !important;
        font-size: 14px;
        color: #EE7559 !important;
        margin: 0 !important;
      }
    }

    .inviteFriends-info {
      margin-top: 10px;
      padding: 30px 15px;
      background: #fff;

      .title {
        font-size: 14px;
        color: #333333;
        line-height: 24px;
        text-align: center;
        margin-bottom: 5px;
      }

      .cell {
        display: flex;
        align-items: flex-start;
        font-size: 12px;
        color: #A0A0A0;
        line-height: 18px;
        overflow: hidden;

        span {}

        p {
          flex: 1;
        }
      }
    }
  }

</style>
